window.onload = function(){
    var lb_cont = document.querySelector(".lb_cont");
    var lb_body = document.querySelector(".lb_body");
    var nextimg = document.querySelector(".nextimg");
    var perimg  = document.querySelector(".perimg");
    var li_list = document.querySelectorAll(".lb_cont>ul>li");

    var change = function(value){
        var newleft =  parseInt(lb_cont.style.left)+value;
        if(newleft < -4000){
            lb_cont.style.left = "0px";
        }
        else if(newleft > 0){
            lb_cont.style.left = "-4000px";
        }
        else{
            lb_cont.style.left =newleft+"px";
        }
    }
    //定义定时器
    var timer;
    function play(){
        timer = setInterval(nextimg.onclick,4000);
        nextimg.style.opacity = 0.7;
        perimg.style.opacity = 0.7;
    }
    function stop(){
        clearInterval(timer);
        nextimg.style.opacity = 1;
        perimg.style.opacity = 1;
    }
    //鼠标的移动控制播放和暂停
    lb_body.onmouseover = stop;
    lb_body.onmouseout  = play;

    //创建图片下方小圆点
    var li_box = document.querySelector(".li_box");
    var ul = document.createElement("ul");
    for(var i=0;i<li_list.length;i++){
        var li = document.createElement("li");
        if(i==0){
            li.style.opacity= "1";    //默认第一个小圆点是1的透明度
        }
        li.setAttribute("index",i);
        ul.appendChild(li);
    }
    li_box.appendChild(ul);

    //让小圆点高亮
    var index = 0;
    var li_list = document.querySelectorAll(".li_box>ul>li");
    function highLight(){
        for(var i=0; i<li_list.length; i++){
            li_list[i].style.opacity= "0.6";
        }
        li_list[index].style.opacity= "1";
    }

    //点击左按钮和右按钮
    perimg.onclick  = function (){
        index--;
        if(index < 0){
            index = li_list.length -1;
        }
        highLight();
        change(1000);

    }
    nextimg.onclick = function (){
        index++;
        if(index > li_list.length -1){
            index = 0;
        }
        highLight();
        change(-1000);
    }
    //启动轮播
    play();

    //点击小圆点进行切换
    for(var j=0;j<li_list.length;j++){
        li_list[j].onclick = function(){
            var currentIndex = this.getAttribute("index");
            change((index-currentIndex)*1000);
            index = currentIndex;
            highLight();
        }
    }
}
